<template>

  <el-row>
    <el-col :span="24">
      <el-row :gutter="20" style="height: 60px; line-height: 60px;">
        <el-col :span="6" :offset="1">
          <el-input v-model="searchData.name" placeholder="请输入角色名称" :clearable="true" size="small" />
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-search" size="small" @click="getRoleListPage(1)">搜索</el-button>
        </el-col>
        <el-col :span="3" :offset="8">
          <el-button size="mini" @click="showAddRole=true">添加角色</el-button>
        </el-col>
      </el-row>

      <div>
        <el-table
          v-loading="listLoading"
          :data="pageInfo.records"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >

          <el-table-column align="center" label="角色名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="selectedRole=scope.row; showUpdateRole = true">修改</el-button>
              <el-button size="mini" type="danger" @click="deleteRole(scope.$index, scope.row)">删除</el-button>
              <el-button type="primary" plain size="mini" @click="selectedRole=scope.row; showAssignPermission = true">分配权限</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

      <!-- 分页 -->
      <el-row style="margin-top: 15px;">
        <el-col style="text-align: center;">
          <el-pagination
            background
            :current-page="pageInfo.current"
            :page-size="pageInfo.size"
            layout="total, prev, pager, next, jumper"
            :total="pageInfo.total"
            @current-change="getRoleListPage"
          />
        </el-col>
      </el-row>

    </el-col>

    <el-dialog title="添加角色" :visible.sync="showAddRole">
      <addRole v-if="showAddRole" @refresh="getRoleListPage(1)" @closeDialog="showAddRole = false" />
    </el-dialog>

    <el-dialog title="修改角色" :visible.sync="showUpdateRole">
      <updateRole v-if="showUpdateRole" :role-id="selectedRole.id" @refresh="getRoleListPage(1)" @closeDialog="showUpdateRole = false" />
    </el-dialog>

    <el-dialog title="配置权限" :visible.sync="showAssignPermission" width="80%" top="5vh">
      <assignPermission v-if="showAssignPermission" :role-id="selectedRole.id" @closeDialog="showAssignPermission = false" />
    </el-dialog>
  </el-row>

</template>

<script>
import request from '@/utils/request'
import addRole from './components/addRole.vue';
import updateRole from './components/updateRole.vue';
import assignPermission from './components/assignPermission.vue'
import qs from 'qs';

export default {
  components: { addRole, updateRole, assignPermission },
  data() {
    return {
      showAddRole: false,
      showUpdateRole: false,
      showAssignPermission: false,
      permissionList: [],
      selectedRole: null,
      listLoading: true,
      rolePermissionIds: [],
      pageInfo: {},
      villagePageInfo: {},
      searchData: {
        currentPage: 1
      }
    }
  },
  created() {
    this.getRoleListPage(this.searchData.currentPage);
  },
  methods: {
    getRoleListPage(currentPage) {
      this.searchData.currentPage = currentPage;
      request({
        url: '/api/role/getRoleListPage',
        method: 'get',
        params: this.searchData
      }).then((res) => {
        this.listLoading = true
        this.pageInfo = res.result;
        this.listLoading = false
      }).catch(() => {

      })
    },
    deleteRole(index, row) {
      this.$confirm('确认删除？')
        .then(_ => {
          request({
            url: '/api/role/deleteRole',
            method: 'post',
            data: qs.stringify({ id: row.id }),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
          }).then((res) => {
            this.getRoleListPage(this.searchData.currentPage);
          }).catch(_ => {})
        }).catch(_ => {});
    }
  }
}
</script>
<style scoped>
  html,body {
    height: 100%;
  }
</style>
